<template>
  <div class="g-toolbar-between">
    <div class="g-toolbar-left">
      <template
        v-for="item in bars"
        :key="item.label"
      >
        <span
          v-if="item.isShow"
          class="g-img-box"
        >
          <img
            :style="item.label == '搜索' ? `padding-bottom: 2px;` : ``"
            :src="item.icon"
            :alt="item.label"
            :title="$t(item.label || '')"
            @click="handleBarClick(item.value)"
          />
        </span>
      </template>
    </div>

    <!-- 设置 -->
    <div class="g-toolbar-right">
      <span
        v-if="!customSystemConfig.hideProfileLibrary"
        class="g-img-box"
      >
        <img
          src="statics/images/sysml/Profile.svg"
          class="g-pointer"
          @click="handleManageProfile"
        />
      </span>
      <MDropdown>
        <span class="g-img-box-group">
          <span class="g-img-content">
            <img
              src="statics/icons/app/iconproperty2.svg"
              alt="配置项"
            />
          </span>
          <span class="g-img-arrow">
            <img
              src="statics/header/icontriangle.svg"
              alt="向下的箭头"
            />
          </span>
        </span>
        <template #dropdown>
          <MDropdownMenuItem
            v-for="item in setList"
            :key="item.value"
            @click="handleChangeProject(item)"
          >
            <el-checkbox
              :checked="item.isCheck"
              :label="$t(item.label)"
              size="small"
              @click.prevent
            />
          </MDropdownMenuItem>
        </template>
      </MDropdown>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, computed } from "vue";
import MDropdown from "@/common/dropdown/Dropdown.vue";
import MDropdownMenuItem from "@/common/dropdown/DropdownMenuItem.vue";
import { actionManager } from "@/action/ActionManager";
import { ActionKey } from "@/action/ActionKey";
import { sideItem } from "../../../graphTabs/graphEditor/BarsMenuItem";
import { OpenProfileManageAction } from "@/modules/model/actions/model/OpenProfileManageAction";
import { customSystemConfig } from "@/config/customSystemConfig";

const bars = sideItem;

const emit = defineEmits<{
  (event: "toggle-siderbar", value: string): void;
}>();
// 设置
const setList = ref([
  {
    value: "show",
    label: "显示扩展文件",
    isCheck: computed(() => !!app?.activeProject?.ui.showProfileOnModelTree)
  }
]);
function handleChangeProject(item: any) {
  if (item.value === "show") {
    app?.activeProject?.ui.showExpandFile(!item.isCheck);
  }
  // app.projectManager.switchProject(val);
}
const handleBarClick = (value: string) => {
  if (value === ActionKey.search) {
    emit("toggle-siderbar", value);
    return;
  }
  const action = actionManager.getAction(value);
  if (!action?.onTreeToolbarClick) return;
  action?.onTreeToolbarClick();
};

function handleManageProfile() {
  const action = actionManager.getAction(ActionKey.openProfileManage) as OpenProfileManageAction;
  action.run(app.activeProject!.id);
}
</script>
<style lang="scss">
@import "@/assets/css/theme.scss";
.v-tree-toolbar {
  border-bottom: 1px solid #e9e9e9;
  background: $frame-siderbar-bg-color;
  height: 100%;
  padding: 6px 9px 6px 9px;
  display: flex;
  justify-content: space-between;
  ._oprate_left {
    display: inline-flex;
    align-items: center;
    ._img {
      margin-right: 8px;
      cursor: pointer;
    }
  }

  ._simulate {
    display: flex;
    height: 100%;
    align-items: center;
    min-width: 26px;
    margin-left: 4px;
    .el-input {
      z-index: 99;
      width: 16px;
    }

    .el-input__inner {
      padding: 0;
      width: 0px;
    }
    i.el-icon.el-select__caret.el-input__icon {
      width: 0px;
      height: 0px;
      top: 4px;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      border-bottom: 4px solid #2f2f2f;
      font-size: 0px;
      line-height: 0px;
    }
    .el-select-dropdown__empty {
      width: 150px;
    }
    .c-dropdown-menu {
      color: red;
    }
  }
}
</style>
